<script setup lang="ts">
import { useEventBus } from '@vueuse/core'
import { unitPrice } from '~/utils/tools'
import type { EventBusParams, SendMessage } from '~/pages/types'
import { appendSendParams } from '~/pages/template/tools'

const props = defineProps<{
  res: any
  send: boolean
}>()
const navigateTo: string = (process.env.NODE_ENV === 'development'
  ? ENV.BASE.API_DEV.PC_URL
  : ENV.BASE.API_PROD.PC_URL)
const { emit } = useEventBus('message-bus')

// 点击商品
function handleClickGoods() {
  const goodsId = props.res.goodsId
  const skuId = props.res.id

  window.open(`${navigateTo}/goodsDetail?goodsId=${goodsId}&skuId=${skuId}`)
}

// 发送信息
function sendMessage() {
  const params: SendMessage = {
    context: props.res,
    messageType: 'MESSAGE',
    operationType: 'MESSAGE',
    ...appendSendParams(),
    // from: myself.value.id,
    // talkId: props.res.id,
    // to: props.res.userId,
  }
  const emitParams: EventBusParams = { type: 'sendMessage', params }
  emit(emitParams)
}
</script>

<template>
  <div v-if="props.res" mx-auto w-300px flex cursor-pointer flex-a-c py-16px @click="handleClickGoods">
    <div block>
      <a-image width="75" :src="res.thumbnail || res.image" />
    </div>
    <div ml-10px w-225px flex flex-col flex-j-sb>
      <div class="wes-2" h-32px>
        {{ res.goodsName || res.name }}
      </div>
      <div mt-10px flex flex-j-sb flex-a-c>
        <div text-16px color-red-5 font-bold>
          <span text-12px>¥</span> {{ unitPrice(res.price || res.goodsPrice, '') }}
        </div>
        <div v-if="send">
          <a-button size="mini" @click.stop="sendMessage">
            发送商品
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.wes-2 {
  /* 适用于webkit内核和移动端 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
